<extend name="desktop_default/template/base_index" />
<block name="area_header">
    <title>买家帮助中心-萌屋网</title>
</block>

<block name="area_top">
    <include file="desktop_default/template/user_bar" />
    <include file="desktop_default/template/shcart_bar" />
    <include file="desktop_default/template/nav_bar" />
</block>

<block name="area_content">
    <link rel="stylesheet" href="__CSS__/helpcenter/helpcenter.css">
    <link rel="stylesheet" href="__CSS__/helpcenter/iconfont.css">
    <script type="text/javascript" src=" __ROOT__/Public/Webview/js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //下拉菜单的实现
            $('.help-left-c').click(function(){
                $('.help-left-c').children('i').html('&#xe618;');
                if($(this).next('.help-fold').css('display')=='none'){
                    $(this).siblings('ul').slideUp(500);
                    $(this).next('.help-fold').slideDown(250);//控制显示下拉的时间
                    $(this).children('i').html('&#xe60f;');
                }else{
                    $(this).next('.help-fold').slideUp(500);//控制影藏的时间
                }
            });
            //折叠菜单绑定click事件
            $('.hajax').click(function(){
                $('.hajax').css({'color':'#726868', 'font-weight':'normal'});
                $(this).css({'color':'#E9215D', 'font-weight':'700'});
                comajax($(this).attr('alt'));//进行AJAX异步请求
            });
            //内容绑定click事件
            $('.hcajax').click(function(){
                var searchid = $(this).attr('alt');
                $('.hajax').each(function(){
                    if($(this).attr('alt') == searchid){
                        $(this).css({'color':'#E9215D', 'font-weight':'700'});
                        $(this).parents('.help-fold').slideDown(250);
                        $(this).parents('.help-fold').prev('.help-left-c').children('i').html('&#xe60f;');
                    }
                });
               comajax(searchid);//进行AJAX异步请求
            });

            function hash() {
                //根据url hash 展开菜单获取数据
                var help_hash = window.location.hash || '';
                if(help_hash!=''){
                    var searchid = help_hash.substr(1);
                    $('.hajax').css({'color':'#726868', 'font-weight':'normal'}).each(function(){
                        if($(this).attr('alt') == searchid){
                            $(this).css({'color':'#E9215D', 'font-weight':'700'});
                            $(this).parents('.help-fold').slideDown(250);
                            $(this).parents('.help-fold').prev('.help-left-c').children('i').html('&#xe60f;');
                        }
                    });
                    comajax(searchid);
                }
            }
            hash();
            if("onhashchange" in window){
               window.onhashchange = hash;
            }

        });
        //ajax封装
        function comajax(id){
            $('.help-right').find('.help-c-body').html('<div></div>');
            $.get("{:U('Mengwu/HelpCenter/Index')}",{id:id},function(data){
                        var odata = $.parseJSON(data );
                        var contentstr = "<div class='help-c-body'><h2><a class='help-c-decoration'>"+odata.title+"</a></h2>"+odata.content+"</div>";
                        $('.help-right').html(contentstr);
                    }
            );
        }
    </script>
    <div class="help-content">
        <div class="help-left">
            <div class="help-main-title">
                <a href="{:U('mengwu/helpCenter/index')}"><i class="iconfont">&#xe640;</i><span>买家帮助中心</span></a>
            </div>
            <foreach name="article_cates" item="vo"  >
                <h5 class="help-left-c"><i class="iconfont">&#xe618;</i>{$vo['name']}</h5>

                <ul class="help-fold">
                    <foreach name="article_title" item="title"  >
                        <if condition="$title['post_category'] == $vo['id'] ">
                            <li><a  class="hajax" alt="{$title['id']}">{$title['post_title']}</a></li>
                        </if>
                    </foreach>
                </ul>

            </foreach>

        </div>
        <div class="help-right">
            <h3>购物流程</h3>
            <ul class="help-guide help-clearfix">
                <li class="help-reg">
                    <a >
                        <i class="iconfont">&#xe63f;</i>
                        <span>注册登录</span>
                    </a>
                </li>
                <li class="help-reg">
                    <a >
                        <i class="iconfont">&#xe609;</i>
                        <span>抢购商品</span>
                    </a>
                </li>
                <li class="help-reg">
                    <a>
                        <i class="iconfont">&#xe607;</i>
                        <span>购物车操作</span>
                    </a>
                </li>
                <li class="help-reg">
                    <a>
                        <i class="iconfont">&#xe671;</i>
                        <span>下单支付</span>
                    </a>
                </li>
                <li class="help-reg">
                    <a>
                        <i class="iconfont">&#xe61d;</i>
                        <span>收货退货</span>
                    </a>
                </li>
            </ul>
            <h3>帮助中心</h3>
            <ul class="help-list help-clearfix">
                <li style="width:auto;">
                    <foreach name="article_cates" item="vo"  >
                        <h5>•&nbsp;{$vo['name']}</h5>
                        <ul>
                            <foreach name="article_title" item="title"  >
                                <if condition="$title['post_category'] == $vo['id'] ">
                                    <li><a class="hcajax" alt="{$title['id']}">{$title['post_title']}</a></li>
                                </if>
                            </foreach>
                        </ul>
                    </foreach>
                </li>

            </ul>
        </div>

    </div>

</block>

<block name="area_footer">
    <include file="desktop_default/template/footer_ad" />
    <include file="desktop_default/template/footer_nav" />
    <include file="desktop_default/template/footer_bottom" />
</block>